<template>
  <!-- <div v-if="avalid"> -->

    <a-modal
      append-to-body
      :visible="dialogVisible"
      :title="displayTitle"
      @cancel="handleCancel"
      :width="props.width"
      :height="props.height"
    >
      <div style="overflow-y: auto;overflow-x: hidden">
        <!--有的组件用的是拷贝-->
        <LicenseContractNewList ref="license_contract_new" :dataId="props.dataId" v-if="code==='license_contract_new'"/>

      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleCancel">取消</el-button>
          <el-button type="primary" @click="handleOk()">
            确定
          </el-button>
        </span>
      </template>

    </a-modal>
  <!-- </div> -->
</template>

<script lang="ts" setup>
import {defineExpose, defineProps, nextTick, onMounted, ref, unref, watch,computed} from "vue";
import {ElMessage, ElMessageBox} from 'element-plus'
import {propTypes} from '/@/utils/propTypes';
import {useAttrs} from '/@/hooks/core/useAttrs';
import LicenseContractNewList from '../LicenseContractNewList.vue'

import {useMessage} from "/@/hooks/web/useMessage";


const props = defineProps({
  title: {type: String, default: ''},
  disabled: propTypes.bool.def(false),
  value: propTypes.string.def(''),
  width: propTypes.string.def('60%'),
  height: propTypes.string.def('60%'),
  dataId : propTypes.string.def(''),
  dataName : propTypes.string.def(''),
  placeholder: propTypes.string.def('请选择'),
  spliter: propTypes.string.def(','),
  code: propTypes.string.def(','),
  fieldConfig: {
    type: Array,
    default: () => [],
  },
  setFieldsValue: propTypes.func,
  closeDialog: propTypes.func,

})
const {createMessage} = useMessage();
const emit = defineEmits(['onChangeColumns']);
onMounted(async () => {
});
const showText = ref('');
const license_contract_new = ref();

//pop是否展示
const avalid = ref(true);

//显示标题
const displayTitle = computed(() => {
  if(props.title){
    return props.title;
  }  
  if(props.code=='license_contract_new'){
    return '模块管理';
  }
  return '选择设备';
})

/**
 * 判断popup配置项是否正确
 */
onMounted(() => {
  if (props.fieldConfig.length == 0) {
    createMessage.error('popup参数未正确配置!');
    // avalid.value = false;
  }
});
watch(
  () => props.value,
  (val) => {
    showText.value = val && val.length > 0 ? val.split(props.spliter).join(',') : '';
  },
  {immediate: true}
);


let dialogVisible = ref(false)

watch(
  () => props.disabled,
  (val) => {
    console.log(val)
    dialogVisible.value = val;
  },
  {immediate: true}
);

const attrs = useAttrs();

function getSelection(ref) {
  let rows = eval(ref).value?.rowSelection?.selectedRows;
  if(rows && rows.length>0){
    let {fieldConfig} = props;
    //匹配popup设置的回调值
    let values = {};
    if(fieldConfig && fieldConfig.length>0){
      for (let item of fieldConfig) {
        let val = rows.map((row) => row[item.source]).join(',');
        item.target.split(',').forEach((target) => {
          values[target] = val;
        });
      }
    }
    //传入赋值方法方式赋值
    props.setFieldsValue && props.setFieldsValue(values);
  }

  props.closeDialog && props.closeDialog(false);
  dialogVisible.value = false
}

/**
 * 取消事件  
 * Author:      yangjq 
*/ 
function handleCancel() {
  props.closeDialog && props.closeDialog(false);
  dialogVisible.value = false
}



/**
 * 取消事件  
 * @author:      yangjq 
*/ 
function handleOk() {
  getSelection(props.code);
}

defineExpose({
  dialogVisible
});
</script>

<style lang="less" scoped>
:deep(.el-dialog__body) {
  padding: 0 12px !important;
}
:deep(.jeecg-basic-table-form-container .ant-form){
  margin-bottom: 0;
}

:deep(.el-overlay){
  z-index: 200 !important;
}
</style>

